<template>
	<view class="container">
		<view class="ui-all">
			<view class="avatar" @tap="getUserInfo">
				<view class="imgAvatar">
					<view class="iavatar" :style="'background: url('+websiteUrl+ avater +') no-repeat center/cover #eeeeee;'">
					</view>
				</view>
				<text>修改头像</text>
				<button class="getInfo"></button>
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<tn-input style="width: 100%;" v-model="nickName" placeholder="请输入昵称" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<tn-input disabled v-model="mobile" placeholder="请输入手机号" />
			</view>
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>常住地</text>
				<picker @change="bindRegionChange" mode='region'>
					<view class="picker">
						{{region[0]?region[0]:['请选择']}} {{region[1]?region[1]:[]}} {{region[2]?region[2]:[]}}
					</view>
				</picker>
			</view>

			<view class="ui-lists">
				<text>签名</text>
				<tn-input class="tn-input" placeholder="请输入个性签名" :height="150" :border="true" type="textarea"
					v-model="last_name"></tn-input>
			</view>
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	import {
		SetUserInfo
	} from "@/api/index.js"
	export default {

		data() {
			return {
				sex: [{
					id: 0,
					name: '男'
				}, {
					id: 1,
					name: '女'
				}, {
					id: 2,
					name: '保密'
				}],
				index: 0,
				region: [],
				avater: '',
				url: '',
				nickName: '',
				headimg: '',
				mobile:'',
				last_name:'',
				websiteUrl:this.$websiteUrl,
				UserObj:{}
			}

		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		methods: {
			bindRegionChange(e) {
				this.region = e.detail.value;

			},
			bindPickerChange(e){
				this.index = e.detail.value;
			},
			bindDateChange(e) {
				this.date = e.detail.value;

			},

			getUserInfo() {
				wx.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success: res => {
						wx.uploadFile({
							url: this.websiteUrl + 'api/system/file/', // 服务器接口地址
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file', // 文件对应的 key，后端用这个 key 获取文件数据
							header: {
								'Content-Type': 'multipart/form-data', // 根据实际需求设置
							},
							success: (res) => {
								if (JSON.parse(res.data).code === 2000) {
									this.url = JSON.parse(res.data).data.file_url
									this.$set(this, 'avater',this.url)
									wx.showToast({
										title: '上传成功',
										icon: 'success',
									})
								}
							},
							fail: (error) => {
								console.error('Upload failed:', error);
								wx.showToast({
									title: '上传失败',
									icon: 'error',
								})
							}
						});
					}
				})
			},
			async savaInfo() {
				const data = {
					username: this.UserObj.mobile,
					id: this.UserObj.id,
				}
				this.url && (data.avatar = this.url);
				this.nickName && (data.name =this.nickName);
				this.index && (data.gender =this.index);
				this.last_name && (data.last_name =this.last_name);
				this.region.length!==0 && (data.pcd =this.region);
				this.region.length!==0 && (data.pcd =this.region);
				const res = await SetUserInfo(this.userInfo.id, data)
				if (res.code === 2000) {
					wx.showToast({
						title: '修改成功',
						icon: 'success',
					})
					this.$store.commit('setUserInfo', res.data);
					this.$store.dispatch('fetchUserInfo');
					setTimeout(() => {
						const data = {
							index: 3
						}
						const objStr = encodeURIComponent(JSON.stringify(data))
						wx.reLaunch({
							url: `/pages/index/index?userInfo=${objStr}`
						})
					}, 300)
				}
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
		},
		watch: {
		  userInfo: {
		    handler(newUserInfo) {
			this.UserObj = newUserInfo
		      // 在 userInfo 变化时更新 avatar 和 nickName
		    this.nickName = newUserInfo.name || '';
		    this.mobile = newUserInfo.mobile || '';
		    this.index = newUserInfo.gender || 0;
			this.last_name = newUserInfo.last_name
		    this.region = newUserInfo.pcd || [];
		    this.avatar = newUserInfo.avatar ? this.$set(this,'avater', newUserInfo.avatar) : '';
		    },
		    deep: true,
		    immediate: true  // 组件加载时立即执行一次
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: block;
	}

	.ui-all {
		padding: 30rpx 48rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-lists {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: left;
			position: relative;
			padding: 30rpx 0;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			.tn-input {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
			}
		}

		.ui-list {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				left: 150rpx;
			}

			.tn-input {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right {
			color: #4a4a4a;
			padding: 30rpx 0;
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			position: absolute;
			bottom: 5%;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			background: #7265E3;
			padding: 10rpx 0;
			border-radius: 40rpx;
			border: none;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
</style>